<template>
	<view class="container">
		<view class="header">
			<view class="header-top">手机号登录/注册</view>
			<h6>首次验证通过即登录</h6>
		</view>
		<view class="ipt">
			<select name="" id="" >
				<option value="1">+86</option>
	
			</select>
			<input  v-model="ipt" type="text" placeholder="请输入您的手机号码"/>
			<image @click="del" src="../../static/images/login/叉.png"></image>
		</view>
		<view class="precaution">
			<checkbox value="cb" :checked="isChecked" @click="isChecked=!isChecked"/>
			<span class="read">我已阅读并同意《服务条款》,《隐私政策》,《中国联通认证服务协议》</span>
			<button @click="goToUser">下一步</button>
		</view>
		<view class="message" style="margin-left: 20px;">
			<span>接收不到短信</span>
		</view>
		<view class="loginForm">
			<span>或通过以下方式登录</span>
			<view class="loginF">
				<image src="../../static/images/login/QQ.png" mode=""></image>
				<image src="../../static/images/login/微信.png" mode=""></image>
			</view>
		</view>
		<view class="footer">
			<span>服务热线</span>
			<span>举报监督电话</span>
			<span>资质证照</span>
		</view>
	</view>
</template>

<script setup>
	import {nextTick, ref} from 'vue'
const ipt=ref('13177341646')
const isChecked=ref(false)
const goToUser=()=>{
	if(isChecked.value&&/^1[3-9]\d{9}$/.test(ipt.value)){
		uni.showLoading({
			title: '加载中',
		});
		setTimeout(()=>{
			uni.hideLoading()
			
		},500);
		uni.switchTab({
			url:'/pages/index/index'
		})	
		
	}else{
		uni.showToast({
			title: '手机号或用户协议没有勾选',
			icon: 'none', 
			duration: 2000 
		})
	}
}
const del=()=>{
	ipt.value=''
}
</script>

<style scoped lang="scss">
.container{
	font-family:"楷体";
	margin: 0 auto;
	position: relative;
	width: 100vw;
	height: 100vh;
	.header{
		margin-left: 20px;
		.header-top  {
			font-size: 34px;
			font-weight:500;
		}
		h6{
			margin-top: 5px;
			font-size: 16px;
			font-weight:500;
		}
	}
	.ipt{
		width: 90vw;
		height: 40px;
		margin: 40px auto;
		display: flex;
		line-height: 40px;
		select {                 
		    border: 0; 
			width: 50px;
		}
		input{
			height: 40px;
			border-bottom: 1px solid black;
			width: calc(90vw - 50px);
			margin-left: 5px;
			font-size: 18px;
		}
		image{
			width: 20px;
			height: 20px;
			margin-top: 10px;
		}
	}
	.precaution{
		width: 90vw;
		margin: 20px auto;
		padding-bottom: 20px;
		checkbox{
			border-radius: 50%;
		}
		.read{
			padding: 10px auto;
			a{
				color:#89d9d8;
				text-decoration: none;
			}
		}
		button{
			color: white;
			margin: 30px auto;
			width: 90vw;
			background-color: #6fbfc1;
			transition: 1s ;
			&:active{
				color:#aef3f6;
				background-color: #89d9d8;
			}
		}
	
	}
	.loginForm{
		width: 200px;
		text-align: center;
		position: absolute;
		bottom:100px;
		left: calc((100vw - 200px)/2);
		.loginF{
			image{
				padding: 20px;
				width: 40px;
				height: 40px;
			}
		}
	}
	.footer{
		margin: 0 auto;
		width: 70vw;
		display: flex;
		justify-content: space-between;
		text-align: center;
		position: absolute;
		bottom:70px;
		left: 15vw;
	}
	
}
</style>
